<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>婚礼庆典｜NGA 风格单页</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
    <script defer src="script.js"></script>
  </head>
  <body>
    <header class="site-header">
      <div class="container header-inner">
        <a class="brand" href="#hero" aria-label="返回首页">Anran & Ruoxi</a>
        <nav class="nav">
          <a href="#story" class="nav-link">我们的故事</a>
          <a href="#schedule" class="nav-link">庆典日程</a>
          <a href="#venue" class="nav-link">地点交通</a>
          <a href="#registry" class="nav-link">礼物清单</a>
          <a href="#gallery" class="nav-link">相册</a>
          <a href="#rsvp" class="nav-link nav-cta">RSVP</a>
        </nav>
      </div>
    </header>

    <main>
      <!-- Hero -->
      <section id="hero" class="hero reveal-on-scroll">
        <div class="container hero-inner">
          <h1 class="hero-title">Anran<br>&amp;<br>Ruoxi</h1>
          <p class="hero-subtitle">2025年5月18日 · 北京</p>
          <div class="hero-actions">
            <a href="#rsvp" class="btn btn-primary">确认出席</a>
            <a href="#story" class="btn btn-ghost">了解我们</a>
          </div>
        </div>
        <div class="scroll-indicator" aria-hidden="true">Scroll</div>
      </section>

      <!-- MCP Serve Search -->
      <section id="mcp-search" class="section reveal-on-scroll">
        <div class="container">
          <h2 class="section-title">MCP Serve 搜索</h2>
          <div class="form-row">
            <label style="flex:1">关键词
              <input type="text" id="mcpQuery" placeholder="输入关键词，如：你好" />
            </label>
            <button type="button" class="btn btn-primary" id="mcpSearchBtn">用 MCP Serve 打开搜索</button>
          </div>
          <p class="form-tip">点击后将通过本地服务在浏览器打开搜索。</p>
        </div>
      </section>

      <!-- Story -->
      <section id="story" class="section reveal-on-scroll">
        <div class="container">
          <h2 class="section-title">我们的故事</h2>
          <div class="grid-2">
            <div class="media-block media-tall" aria-label="故事图片占位"></div>
            <div class="content-block">
              <p class="lead">我们在秋日的美术馆相遇，从第一句问候到如今的携手同行，一切恰到好处。</p>
              <p>从彼此的梦想到生活的细节，我们慢慢在同一个节奏里看见世界。希望在这个特别的日子里，与您分享我们的喜悦与感动。</p>
              <p class="meta">摄影：朋友 · 地点：国立美术馆风格空间</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Schedule -->
      <section id="schedule" class="section reveal-on-scroll">
        <div class="container">
          <h2 class="section-title">庆典日程</h2>
          <ul class="timeline">
            <li>
              <time>14:00</time>
              <div>
                <h3>迎宾入场</h3>
                <p>签到与茶点，现场有引导人员带领入座。</p>
              </div>
            </li>
            <li>
              <time>15:00</time>
              <div>
                <h3>仪式开始</h3>
                <p>交换誓言与戒指，音乐与花艺营造宁静气氛。</p>
              </div>
            </li>
            <li>
              <time>16:30</time>
              <div>
                <h3>合影与互动</h3>
                <p>在庭院与展厅进行合影，设置互动装置与留言墙。</p>
              </div>
            </li>
            <li>
              <time>18:00</time>
              <div>
                <h3>晚宴</h3>
                <p>简洁优雅的摆台，伴随轻柔爵士与温暖灯光。</p>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <!-- Venue -->
      <section id="venue" class="section reveal-on-scroll">
        <div class="container">
          <h2 class="section-title">地点与交通</h2>
          <div class="grid-2">
            <div class="content-block">
              <h3>Art House · 霁园</h3>
              <p>北京市朝阳区 · 邻近地铁与公共停车场。入场后沿指示牌即可到达仪式区与晚宴厅。</p>
              <ul class="list-plain">
                <li>地铁：14号线 · 艺术中心站（C口）</li>
                <li>驾车：导航“霁园 Art House”</li>
                <li>着装：优雅与舒适即可</li>
              </ul>
            </div>
            <div class="media-block media-map" aria-label="地图占位"></div>
          </div>
        </div>
      </section>

      <!-- Registry -->
      <section id="registry" class="section reveal-on-scroll">
        <div class="container">
          <h2 class="section-title">礼物清单</h2>
          <div class="card-grid">
            <article class="card">
              <h3>旅行基金</h3>
              <p>支持我们的蜜月旅行，感谢您的祝福。</p>
              <a href="#" class="text-link">了解方式</a>
            </article>
            <article class="card">
              <h3>家居精选</h3>
              <p>简约、耐用的器物，陪伴后续生活。</p>
              <a href="#" class="text-link">查看清单</a>
            </article>
            <article class="card">
              <h3>公益捐赠</h3>
              <p>将爱心传递给更多人，一起做有温度的事。</p>
              <a href="#" class="text-link">捐赠渠道</a>
            </article>
          </div>
        </div>
      </section>

      <!-- Gallery -->
      <section id="gallery" class="section reveal-on-scroll">
        <div class="container">
          <h2 class="section-title">相册</h2>
          <div class="masonry">
            <div class="tile tile-tall"></div>
            <div class="tile"></div>
            <div class="tile tile-wide"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile tile-wide"></div>
          </div>
        </div>
      </section>

      <!-- RSVP -->
      <section id="rsvp" class="section reveal-on-scroll">
        <div class="container">
          <h2 class="section-title">RSVP</h2>
          <form class="rsvp-form" autocomplete="on">
            <div class="form-row">
              <label>姓名
                <input type="text" name="name" required placeholder="您的姓名" />
              </label>
              <label>人数
                <input type="number" name="guests" min="1" max="6" value="1" />
              </label>
            </div>
            <div class="form-row">
              <label>联系方式
                <input type="tel" name="phone" placeholder="手机号" />
              </label>
              <label>备注
                <input type="text" name="note" placeholder="饮食或其他需求" />
              </label>
            </div>
            <button type="submit" class="btn btn-primary">提交 RSVP</button>
            <p class="form-tip">提交后将显示确认提示（本页不做数据存储）。</p>
          </form>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <div class="container">
        <p>© 2025 Anran & Ruoxi · 期待与您相聚</p>
      </div>
    </footer>
  </body>
  </html>